import 'package:aqua_plunge/constants/colors.dart';
import 'package:aqua_plunge/constants/constants.dart';
import 'package:aqua_plunge/medal/medalstore_page.dart';
import 'package:aqua_plunge/post/post_page.dart';
import 'package:aqua_plunge/util/MedalType.dart';
import 'package:aqua_plunge/util/view_util.dart';
import 'package:aqua_plunge/widget/MedalsDialog.dart';
import 'package:aqua_plunge/widget/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/get_core.dart';

import '../controller/UserController.dart';
import '../http/app_manager.dart';


final GlobalKey<_HomPgaeState> _key = GlobalKey<_HomPgaeState>();

class MedalPage extends StatefulWidget {
  final int currentPageIndex;
  const MedalPage({super.key, required this.currentPageIndex});

  @override
  State<MedalPage> createState() => _HomPgaeState();
}

class _HomPgaeState extends State<MedalPage>
    with AutomaticKeepAliveClientMixin {

  final UserController _userController = Get.find<UserController>();

  get _contentOne => Container(
        margin: const EdgeInsets.only(top: 20),
        child: _buildItem(
            280,
            Column(
              children: [
                const SizedBox(height: 54),
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(14),
                      color: AppColors.textbgColor),
                  height: 30,
                  alignment: Alignment.center,
                  child: const Text(
                    'Go post an article to get your own medal.',
                    style: TextStyle(color: Colors.white, fontSize: 12),
                  ),
                ),
                const SizedBox(height: 20),
                Row(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Expanded(
                      child: _getMedalLevelCover(MedalType.level1),
                    ),
                    Expanded(
                      child: _getMedalLevelCover(MedalType.level2),
                    ),
                    Expanded(
                      child: _getMedalLevelCover(MedalType.level3),
                    ),
                    Expanded(
                      child: _getMedalLevelCover(MedalType.level4),
                    ),
                  ],
                ),
                const SizedBox(height: 5),
                Row(
                  children: [
                    Expanded(
                        child: Image.asset(
                      'images/icon_arrow_down.png',
                      width: 24,
                      height: 24,
                    )),
                    Expanded(
                        child: Image.asset(
                      'images/icon_arrow_down.png',
                      width: 24,
                      height: 24,
                    )),
                    Expanded(
                        child: Image.asset(
                      'images/icon_arrow_down.png',
                      width: 24,
                      height: 24,
                    )),
                    Expanded(
                        child: Image.asset(
                      'images/icon_arrow_down.png',
                      width: 24,
                      height: 24,
                    ))
                  ],
                ),
                const SizedBox(height: 5),
                Row(
                  children: [
                    Expanded(
                        child:
                            _getUpgradeMedalCover(MedalType.upgrade1, 78, 78)),
                    Expanded(
                        child:
                            _getUpgradeMedalCover(MedalType.upgrade2, 78, 78)),
                    Expanded(
                        child:
                            _getUpgradeMedalCover(MedalType.upgrade3, 78, 78)),
                    Expanded(
                        child:
                            _getUpgradeMedalCover(MedalType.upgrade4, 78, 78))
                  ],
                )
              ],
            )),
      );

  get _contentlevel1 => _buildItem(
      162,
      Row(
        children: [
          Column(
            children: [
              const SizedBox(
                height: 26,
              ),
              Image.asset(
                'images/icon_level1.png',
                width: 72,
                height: 80,
              ),
              const SizedBox(height: 5),
              Image.asset(
                'images/icon_free.png',
                width: 55,
                height: 21,
              )
            ],
          ),
          const SizedBox(
            width: 10,
          ),
          Expanded(
              child: Container(
            alignment: Alignment.centerRight,
            padding: const EdgeInsets.only(top: 24),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerRight,
                  child: const Text(
                    "Junior Medal",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 14,
                        decoration: TextDecoration.underline),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                const Text(
                  Constants.levelOneDepict,
                  style: TextStyle(color: AppColors.grayColor, fontSize: 12),
                  maxLines: 3,
                ),
                Container(
                  alignment: Alignment.centerRight,
                  padding: const EdgeInsets.only(top: 8),
                  child: GestureDetector(
                    onTap: () {
                      Get.to(() => const  MedalStorePage())?.then((value){
                        _checkShowDialog();
                        setState(() {});
                      });
                    },
                    child: Visibility(visible: !AppManager.isAcquireMedal(MedalType.upgrade1),child: Image.asset(
                      'images/icon_upgrade.png',
                      width: 111,
                      height: 28,
                    ),)
                  ),
                )
              ],
            ),
          ))
        ],
      ));

  get _contentlevel2 => _buildItem(
      162,
      Row(
        children: [
          Column(
            children: [
              const SizedBox(
                height: 26,
              ),
              Image.asset(
                'images/icon_level2.png',
                width: 72,
                height: 80,
              ),
              const SizedBox(height: 5),
              Visibility(
                  visible: !AppManager.isAcquireMedal(MedalType.level2),
                  child: Image.asset(
                    'images/icon_level2_unlocked.png',
                    width: 55,
                    height: 21,
                  ))
            ],
          ),
          const SizedBox(
            width: 10,
          ),
          Expanded(
              child: Container(
            alignment: Alignment.centerRight,
            padding: const EdgeInsets.only(top: 24),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerRight,
                  child: const Text(
                    "Medium Medal",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 14,
                        decoration: TextDecoration.underline),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                const Text(
                  Constants.levelTwoDepict,
                  style: TextStyle(color: AppColors.grayColor, fontSize: 12),
                  maxLines: 3,
                ),
                Container(
                  alignment: Alignment.centerRight,
                  padding: const EdgeInsets.only(top: 8),
                  child: GestureDetector(
                    onTap: () {
                      AppManager.isAcquireMedal(MedalType.level2)?
                      Get.to(() => const MedalStorePage())?.then((value){
                        _checkShowDialog();
                        setState(() {});
                      }):
                      Get.to(() => const PostPage(),arguments: MedalType.level2)?.then((value){
                        _checkShowDialog();
                        setState(() {});
                      });
                    },
                    child: Visibility(visible: !AppManager.isAcquireMedal(MedalType.upgrade2),child: Image.asset(
                      AppManager.isAcquireMedal(MedalType.level2)?'images/icon_upgrade.png':'images/icon_toget.png',
                      width: 111,
                      height: 28,
                    ),),
                  ),
                )
              ],
            ),
          ))
        ],
      ));

  get _contentlevel3 => _buildItem(
      162,
      Row(
        children: [
          Column(
            children: [
              const SizedBox(
                height: 26,
              ),
              Image.asset(
                'images/icon_level3.png',
                width: 72,
                height: 80,
              ),
              const SizedBox(height: 5),
              Visibility(
                  visible: !AppManager.isAcquireMedal(MedalType.level3),
                  child: Image.asset(
                    'images/icon_level3_unlocked.png',
                    width: 55,
                    height: 21,
                  ))
            ],
          ),
          const SizedBox(
            width: 10,
          ),
          Expanded(
              child: Container(
            alignment: Alignment.centerRight,
            padding: const EdgeInsets.only(top: 24),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerRight,
                  child: const Text(
                    "Superior Medal",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 14,
                        decoration: TextDecoration.underline),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                const Text(
                  Constants.levelThreeDepict,
                  style: TextStyle(color: AppColors.grayColor, fontSize: 12),
                  maxLines: 3,
                ),
                Container(
                  alignment: Alignment.centerRight,
                  padding: const EdgeInsets.only(top: 8),
                  child: GestureDetector(
                    onTap: () {
                      AppManager.isAcquireMedal(MedalType.level3)?
                      Get.to(() => const MedalStorePage())?.then((value){
                        _checkShowDialog();
                        setState(() {});
                      }):
                      Get.to(() => const PostPage(),arguments: MedalType.level3)?.then((value){
                        _checkShowDialog();
                        setState(() {});
                      });
                    },
                    child: Visibility(visible: !AppManager.isAcquireMedal(MedalType.upgrade3),child: Image.asset(
                      AppManager.isAcquireMedal(MedalType.level3)?'images/icon_upgrade.png':'images/icon_toget.png',
                      width: 111,
                      height: 28,
                    ),),
                  ),
                )
              ],
            ),
          ))
        ],
      ));

  get _contentlevel4 => _buildItem(
      162,
      Row(
        children: [
          Column(
            children: [
              const SizedBox(
                height: 26,
              ),
              Image.asset(
                'images/icon_level4.png',
                width: 72,
                height: 80,
              ),
              const SizedBox(height: 5),
              Visibility(
                  visible: !AppManager.isAcquireMedal(MedalType.level4),
                  child: Image.asset(
                    'images/icon_level4_unlocked.png',
                    width: 55,
                    height: 21,
                  ))
            ],
          ),
          const SizedBox(
            width: 10,
          ),
          Expanded(
              child: Container(
            alignment: Alignment.centerRight,
            padding: const EdgeInsets.only(top: 24),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerRight,
                  child: const Text(
                    "Junior Medal",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        fontSize: 14,
                        decoration: TextDecoration.underline),
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                const Text(
                  Constants.levelFourDepict,
                  style: TextStyle(color: AppColors.grayColor, fontSize: 12),
                  maxLines: 3,
                ),
                Container(
                  alignment: Alignment.centerRight,
                  padding: const EdgeInsets.only(top: 8),
                  child: GestureDetector(
                    onTap: () {
                      AppManager.isAcquireMedal(MedalType.level4)?
                      Get.to(() => const MedalStorePage())?.then((value){
                        _checkShowDialog();
                        setState(() {});
                      }):
                      Get.to(() => const PostPage(),arguments: MedalType.level4)?.then((value){
                        _checkShowDialog();
                        setState(() {});
                      });;
                    },
                    child: Visibility(visible: !AppManager.isAcquireMedal(MedalType.upgrade4),child: Image.asset(
                      AppManager.isAcquireMedal(MedalType.level4)?'images/icon_upgrade.png':'images/icon_toget.png',
                      width: 111,
                      height: 28,
                    ),),
                  ),
                )
              ],
            ),
          ))
        ],
      ));

  @override
  void initState() {
    super.initState();
    _checkShowDialog();
  }

  _checkShowDialog(){
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      if (AppManager.isFirstLaunch()) {
        _showWelcomeDialog(MedalType.level1);
      }
      if(AppManager.isMedalFirstLaunch(MedalType.level2)??false){
        _showWelcomeDialog(MedalType.level2);
      }
      if(AppManager.isMedalFirstLaunch(MedalType.level3)??false){
        _showWelcomeDialog(MedalType.level3);
      }
      if(AppManager.isMedalFirstLaunch(MedalType.level4)??false){
        _showWelcomeDialog(MedalType.level4);
      }
      if(AppManager.isMedalFirstLaunch(MedalType.upgrade1)??false){
        _showWelcomeDialog(MedalType.upgrade1);
      }
      if(AppManager.isMedalFirstLaunch(MedalType.upgrade2)??false){
        _showWelcomeDialog(MedalType.upgrade2);
      }
      if(AppManager.isMedalFirstLaunch(MedalType.upgrade3)??false){
        _showWelcomeDialog(MedalType.upgrade3);
      }
      if(AppManager.isMedalFirstLaunch(MedalType.upgrade4)??false){
        _showWelcomeDialog(MedalType.upgrade4);
      }

    });
  }

  @override
  void didUpdateWidget(covariant MedalPage oldWidget) {
    super.didUpdateWidget(oldWidget);
    if(widget.currentPageIndex == 3){
      _checkShowDialog();
    }
  }

  @override
  void updateKeepAlive() {
    super.updateKeepAlive();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return StatefulBuilder(
        key: _key,
        builder: (BuildContext context,StateSetter setState){
          return Stack(
            children: [
              Positioned.fill(
                  child: Image.asset("images/img_primary_bg.png", fit: BoxFit.fill)),
              Container(
                padding: const EdgeInsets.all(24),
                child: ListView(
                  children: [
                    Stack(
                      children: [
                        _contentOne,
                       Obx((){
                         return  Container(
                           alignment: Alignment.center,
                           child: CustomAvatar(width: 80,height: 80,netPath: _userController.userInformation.avatarUrl??_userController.userInformation.avatar??'',),
                         );
                       })
                      ],
                    ),
                    _contentlevel1,
                    _contentlevel2,
                    _contentlevel3,
                    _contentlevel4
                  ],
                ),
              )
            ],
          );
        });
  }

  Widget _buildItem(double h, Widget childview) {
    return Container(
      height: h,
      margin: const EdgeInsets.only(top: 20),
      width: double.infinity,
      padding: const EdgeInsets.only(left: 20, right: 20),
      decoration: BoxDecoration(
        image: const DecorationImage(
            image: AssetImage('images/list_item_bg.png'), fit: BoxFit.cover),
        borderRadius: BorderRadius.circular(12),
      ),
      child: childview,
    );
  }

  @override
  bool get wantKeepAlive => true;

  void _showWelcomeDialog(MedalType mtype) {
    showDialog(
      context: context,
      builder: (context) {
        return MedalsDialog(type: mtype);
      },
    );
  }

  _getUpgradeMedalCover(MedalType type, double mWidth, double mHeight) {
    return Stack(
      children: [
        Image.asset(
          getPathByMedalType(type),
          width: mWidth,
          height: mHeight,
        ),
        Visibility(
            visible: !AppManager.isAcquireMedal(type),
            child: Image.asset('images/icon_medal_cover.png',
                width: mWidth, height: mHeight))
      ],
    );
  }

  _getMedalLevelCover(MedalType type){
    return Stack(
      children: [
        Container(padding: const EdgeInsets.only(top: 8),child: Center(child: Image.asset(
          getPathByMedalType(type),
          width: 38,
          height: 44,
        ),),),
        Visibility(visible: !AppManager.isAcquireMedal(type),
        child: Center(child: Image.asset('images/icon_medal_cover.png',width: 60,height: 60)),)
      ],);

  }

}
